<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.classificationName"
            :placeholder="$t('请输入礼物卡分类名称')"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="formInline.classificationStatus"
            :placeholder="$t('请选择状态')"
            clearable
          >
            <el-option :label="$t('启用')" value="0"></el-option>
            <el-option :label="$t('停用')" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            v-permission="['GET /admin/p/card_virtual_index']"
            @click="getList"
            >{{ $t("Search") }}</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button
            type="success"
            plain1
            v-permission="['GET /admin/p/card_virtual_add']"
            icon="el-icon-circle-plus"
            @click="handerCreate"
            >{{ $t("Add") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('Searching')"
      stripe
      fit
      highlight-current-row
    >
      <el-table-column
        :label="$t('序号')"
        width="60"
        align="center"
        type="index"
        :index="(index) => (formInline.page - 1) * formInline.limit + index + 1"
      />


      <el-table-column
        align="center"
        :label="$t('礼物卡分类')"
        prop="classificationName"
      />
      <el-table-column align="center" :label="$t('排序')" prop="classificationSort" />
      <el-table-column
        align="center"
        :label="$t('状态')"
        prop="classificationStatus"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.classificationStatus == 0" type="success">{{
            statusDic[scope.row.classificationStatus]
          }}</el-tag>
          <el-tag v-if="scope.row.classificationStatus == 1" type="danger">{{
            statusDic[scope.row.classificationStatus]
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('Operate')"
        width="300"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="{ row }">
          {{ $t("Operate") }}
          <i class="el-icon-s-tools" style="color: #d35e32"></i>
        </template>
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.classificationStatus == 1"
            :underline="false"
            type="primary"
            @click="handerEdit(scope.row)"
            size="small"
            ><i class="el-icon-edit"></i>{{ $t("编辑") }}</el-link
          >
          <el-link
            v-if="scope.row.classificationStatus == 0"
            :underline="false"
            type="primary"
            @click="handerDetails(scope.row)"
            size="small"
            ><i class="el-icon-edit"></i>{{ $t("详情") }}</el-link
          >
          <el-link
            :underline="false"
            type="primary"
            @click="editCardClassificationSwitch(scope.row)"
            size="small"
            ><i class="el-icon-edit"></i
            >{{
              scope.row.classificationStatus == 1 ? "启动" : "停用"
            }}</el-link
          >
          <el-link
            v-if="scope.row.classificationStatus == 1"
            :underline="false"
            type="danger"
            @click="handerDelete(scope.row)"
            size="small"
            ><i class="el-icon-delete"></i>{{ $t("删除") }}</el-link
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="cardClassificationTotal > 0"
      :total="cardClassificationTotal"
      :page.sync="formInline.page"
      :limit.sync="formInline.limit"
      @pagination="getList"
    />

    <!-- <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip> -->

    <!-- <dic class="dialogCenter">
      <el-dialog
        :title="dialogStatus == 'update' ? $t('编辑') : $t('添加')"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <div>
          <el-form
            :model="cardClassificationForm"
            :rules="rules"
            ref="cardClassificationForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item
              :label="$t('礼物卡分类名称')"
              prop="classificationName"
            >
              <el-input
                :disabled="dialogStatus == 'details'"
                type="textarea"
                :autosize="{ minRows: 1 }"
                v-model="cardClassificationForm.classificationName"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('序号')" prop="classificationSort">
              <el-input-number
                :disabled="dialogStatus == 'details'"
                v-model="cardClassificationForm.classificationSort"
                :min="1"
                :controls="false"
                :precision="0"
              ></el-input-number>
            </el-form-item>

            <el-form-item
              :label="$t('是否启用')"
              prop="classificationStatus"
              v-if="dialogStatus == 'create'"
            >
              <el-switch
                v-model="cardClassificationForm.classificationStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-text="$t('启用')"
                :inactive-text="$t('停用')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item>
              <el-button
                v-if="dialogStatus == 'create'"
                icon="el-icon-check"
                type="primary"
                @click="submitForm('cardClassificationForm')"
                >{{ $t("立即创建") }}</el-button
              >
              <el-button
                v-if="dialogStatus == 'update'"
                type="primary"
                plain1
                icon="el-icon-edit"
                @click="editCardClassification"
                >{{ $t("提交编辑") }}</el-button
              >
              <el-button
                v-if="dialogStatus != 'details'"
                icon="el-icon-refresh"
                @click="resetForm('cardClassificationForm')"
                >{{ $t("重置数据") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic> -->

    <!-- 第一个弹框 -->
    <dic class="dialogCenter">
      <el-dialog
        :title="$t('添加')"
        :visible.sync="dialogVisible1"
        width="40%"
        :before-close="handleClose"
      >
        <!-- 表单内容 -->
        <div>
          <el-form
            :model="cardClassificationForm"
            :rules="rules"
            ref="cardClassificationForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item
              :label="$t('礼物卡分类名称')"
              prop="classificationName"
            >
              <el-input
                :disabled="dialogStatus == 'details'"
                type="textarea"
                :autosize="{ minRows: 1 }"
                v-model="cardClassificationForm.classificationName"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('序号')" prop="classificationSort">
              <el-input-number
                :disabled="dialogStatus == 'details'"
                v-model="cardClassificationForm.classificationSort"
                :min="1"
                :controls="false"
                :precision="0"
              ></el-input-number>
            </el-form-item>

            <el-form-item
              :label="$t('是否启用')"
              prop="classificationStatus"
              v-if="dialogStatus == 'create'"
            >
              <el-switch
                v-model="cardClassificationForm.classificationStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-text="$t('启用')"
                :inactive-text="$t('停用')"
              >
              </el-switch>
            </el-form-item>

            <el-form-item>
              <el-button
                v-if="dialogStatus == 'create'"
                icon="el-icon-check"
                type="primary"
                @click="submitForm('cardClassificationForm')"
                >{{ $t("立即创建") }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </dic>

    <!-- 第二个弹框 -->
    <el-dialog
      :title="$t('编辑')"
      :visible.sync="dialogVisible2"
      width="40%"
      :before-close="handleClose"
    >
      <!-- 表单内容 -->
      <div>
        <el-form
          :model="cardClassificationForm"
          :rules="rules"
          ref="cardClassificationForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item :label="$t('礼物卡分类名称')" prop="classificationName">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1 }"
              v-model="cardClassificationForm.classificationName"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('序号')" prop="classificationSort">
            <el-input-number
              v-model="cardClassificationForm.classificationSort"
              :min="1"
              :controls="false"
              :precision="0"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            :label="$t('是否启用')"
            prop="classificationStatus"
            v-if="dialogStatus == 'update'"
          >
            <el-switch
              v-model="classificationStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-text="$t('启用')"
              :inactive-text="$t('停用')"
            >
            </el-switch>
          </el-form-item>

          <el-form-item>
            <el-button
              v-if="dialogStatus == 'update'"
              type="primary"
              plain1
              icon="el-icon-edit"
              @click="editCardClassification"
              >{{ $t("提交编辑") }}</el-button
            >
            <!-- <el-button
              v-if="dialogStatus != 'details'"
              icon="el-icon-refresh"
              @click="resetForm('cardClassificationForm')"
              >{{ $t("重置数据") }}</el-button
            > -->
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 第三个弹框 -->
    <el-dialog
      :title="$t('详情')"
      :visible.sync="dialogVisible3"
      width="40%"
      :before-close="handleClose"
    >
      <!-- 表单内容 -->
      <div>
        <el-form
          :model="cardClassificationForm"
          :rules="rules"
          ref="cardClassificationForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item :label="$t('礼物卡分类名称')" prop="classificationName">
            <el-input
              :disabled="dialogStatus == 'details'"
              type="textarea"
              :autosize="{ minRows: 1 }"
              v-model="cardClassificationForm.classificationName"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('序号')" prop="classificationSort">
            <el-input-number
              :disabled="dialogStatus == 'details'"
              v-model="cardClassificationForm.classificationSort"
              :min="1"
              :controls="false"
              :precision="0"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            :label="$t('是否启用')"
            prop="classificationStatus"
            v-if="dialogStatus == 'details'"
          >
            <el-switch
              :disabled="dialogStatus == 'details'"
              v-model="cardClassificationForm.classificationStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-text="$t('启用')"
              :inactive-text="$t('停用')"
            >
            </el-switch>
          </el-form-item>

          <el-form-item>
            <el-button
              v-if="dialogStatus == 'update'"
              type="primary"
              plain1
              icon="el-icon-edit"
              @click="editCardClassification"
              >{{ $t("提交编辑") }}</el-button
            >
            <el-button
              v-if="dialogStatus != 'details'"
              icon="el-icon-refresh"
              @click="resetForm('cardClassificationForm')"
              >{{ $t("重置数据") }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  cardClassificationList,
  cardClassificationCreate,
  cardClassificationUpdate,
  cardClassificationDelete,
} from "@/api/cardClassification";

import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { status } from "nprogress";
export default {
  name: "cardClassification",
  components: { Pagination },
  data() {
    return {
      list: [],
      switch: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogStatus: "",
      classificationStatus: false,
      cardClassificationForm: {
        classificationName: undefined,
        classificationStatus: false,
        classificationSort: 0,
      },
      cardClassificationTotal: 0,
      listLoading: false,
      formInline: {
        classificationName: undefined,
        classificationStatus: undefined,
        page: 1,
        limit: 10,
        sort: "add_time",
        order: "desc",
      },
      statusDic: [this.$t("启用"), this.$t("停用")],
      rules: {
        classificationName: [
          { required: true, message: "请输入礼物卡分类名称", trigger: "blur" },
          {
            min: 1,
            max: 255,
            message: "长度在 1 到 255 个字符",
            trigger: "blur",
          },
        ],
        classificationSort: [
          {
            required: true,
            message: "请填写礼物卡分类排序(数字)",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      cardClassificationList(this.formInline)
        .then((response) => {
          this.list = response.data.data.list;
          this.cardClassificationTotal = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.cardClassificationTotal = 0;
          this.listLoading = false;
        });
    },

    handerCreate() {
      this.dialogVisible1 = true;
      this.dialogStatus = "create";
      this.cardClassificationForm = {
        classificationName: undefined,
        classificationStatus: false,
        classificationSort: 0,
      };
      // this.cardClassificationForm = {};
    },
    handerEdit(row) {
      this.dialogVisible2 = true;
      this.dialogStatus = "update";
      this.cardClassificationForm = row;
      console.log("123213231213");
      console.log(this.cardClassificationForm);
      // this.cardClassificationForm.classificationStatus =
      //   row.classificationStatus == 0;
    },
    handerDetails(row) {
      this.dialogVisible3 = true;
      this.dialogStatus = "details";
      this.cardClassificationForm = row;
      // this.cardClassificationForm.classificationStatus =
      //   row.classificationStatus == 0;
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          this.getList();
          done();
        })
        .catch((_) => {});
    },

    resetForm() {
      this.cardClassificationForm = {};
    },

    submitForm(formName) {
      this.dialogVisible1 = false;
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.cardClassificationForm);
          console.log(12333333333333);
          console.log(this.cardClassificationForm.classificationStatus);
          this.cardClassificationForm.classificationStatus =
            this.cardClassificationForm.classificationStatus == false ? 1 : 0;
          console.log(this.cardClassificationForm.classificationStatus);
          console.log(this.cardClassificationForm);
          cardClassificationCreate(this.cardClassificationForm)
            .then((res) => {
              if (res.data.data == 100) {
                this.$notify({
                  title: "警告",
                  message: "这是一条警告的提示消息",
                  type: "warning",
                });
              } else {
                this.dialogVisible = false;
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                });
                this.$refs["cardClassificationForm"].resetFields();
                this.getList();
              }
            })
            .catch(() => {
              this.$notify.error({
                title: "错误",
                message: "创建失败",
              });
            });
        } else {
          return false;
        }
      });
    },

    editCardClassification() {
      this.dialogVisible1 = false;
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
      const data = this.cardClassificationForm;
      data.classificationStatus = data.classificationStatus ? 0 : 1;
      if (this.dialogStatus == "update") {
        data.classificationStatus = this.classificationStatus ? 0 : 1;
      }
      cardClassificationUpdate(data)
        .then((res) => {
          this.dialogVisible = false;
          this.$notify({
            title: "成功",
            message: "编辑成功",
            type: "success",
          });
          this.getList();
        })
        .catch(() => {
          this.$notify.error({
            title: "错误",
            message: "编辑失败",
          });
        });
    },

    editCardClassificationSwitch(row) {
      this.$confirm(
        "确认" + row.classificationStatus == 1
          ? "启用"
          : "停用" + "吗？是否继续？"
      )
        .then((_) => {
          data.classificationStatus = row.classificationStatus ? 0 : 1;
          data.id = row.id;
          cardClassificationUpdate(data)
            .then((res) => {
              this.dialogVisible = false;
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.getList();
            })
            .catch(() => {
              this.$notify.error({
                title: "错误",
                message: "操作失败",
              });
            });
        })
        .catch((_) => {});
      const data = {
        id: undefined,
        classificationStatus: false,
      };
    },

    handerDelete(row) {
      if (row.classificationStatus == 0) {
        this.$notify({
          title: "警告",
          message: "该分类已启动！",
          type: "warning",
        });
        return;
      }
      this.$confirm("确认删除？")
        .then((_) => {
          cardClassificationDelete(row)
            .then((res) => {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              this.getList();
            })
            .catch((res) => {
              if (res.data.errno == 401) {
                this.$notify({
                  title: "警告",
                  message: "策略正在使用！",
                  type: "warning",
                });
                return;
              }
              this.$notify.error({
                title: "错误",
                message: "删除失败",
              });
            });
        })
        .catch((_) => {});
    },
  },
};
</script>
  <style scoped>
.daytime {
  color: #606266;
  font-size: 14px;
  font-weight: 700;
}
</style>
